<html>
<title>监视变量$watch</title>

<head>
    <script src="./js/vue.js"></script>

</head>

<body>
    <div class="container">
        <input type="text" v-model="name" />
        <br />
        {{ name }}
        <br />
        <br />
        <input type="text" v-model="age" />
        <br />
        {{ age }}
        <br />
        <br />
        <input type="text" v-model="user.name" />
        <br />
        {{ user.name}}
    </div>
    <script>
        var vm = new Vue({
            data: {
                name: "jerry",
                age: 14,
                user: {
                    name: "tom",
                    age: 18
                }
            },
            methods: {
            },
            watch: {//方式二：使用Vue实例提供的watch选项
                age: (newVal, oldVal) => {
                    console.log("age 被修改了，旧值：" + oldVal + ",新值：" + newVal);
                },
                user: {
                    handler: (newVal, oldVal) => {
                        console.log("user 被修改了，旧值：" + oldVal.name + ",新值：" + newVal.name);
                    },
                    deep: true //深度监视，当对象中的属性发生变化时也会被监视
                }
            }
        }).$mount('.container');
        vm.$watch('name', (newVal, oldVal) => { //方式一：使用Vue实例提供的watch方法
            console.log("name 被修改了，旧值：" + oldVal + ",新值：" + newVal);
        });
    </script>
</body>

</html>